<mat-drawer-container autosize>
    <mat-drawer #drawer class="example-sidenav" mode="side" position="end">
      <app-chat-configuration [chatRequest]="chatRequest"></app-chat-configuration>
    </mat-drawer>
    <mat-card>
        <mat-card-title>Ask GenWealth</mat-card-title>
        @if (loading) {
            <!-- Loading spinner -->
            <mat-spinner></mat-spinner>
        }
        @else if (!loading && chatResponse) {
            <!-- Response -->
            <app-sql-statement [query]="chatResponse.query">See Query</app-sql-statement>
            <app-sql-statement [query]="chatResponse.llmPrompt">See Prompt</app-sql-statement>
            <div class="response" innerHtml="{{chatResponse.llmResponse | textToHtml}}" class="chat-response"></div>
        }
        <mat-form-field>
            <textarea cdkTextareaAutosize matInput (keydown.enter)="askQuestion()" [(ngModel)]="chatRequest.prompt" type="text" [placeholder]="chatPlaceholder"></textarea>
            <mat-icon matTooltip="Sample suggestion" matSuffix fontSet="material-symbols-outlined"
                    (click)="getAskSuggestion()">
                prompt_suggestion
            </mat-icon>            
        </mat-form-field>

        <mat-card-actions>
            <button mat-raised-button color="primary" [disabled]="chatRequest.prompt.length === 0" 
                (click)="askQuestion()">Ask</button>
            <mat-slide-toggle [(ngModel)]="chatRequest.advanced" (click)="drawer.toggle()">
                Advanced
            </mat-slide-toggle>
        </mat-card-actions>
    </mat-card>
</mat-drawer-container>